<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="css/register.css" />
	</head>
	<body>
		<div class="box">
			<div class="header">
				<span>帮助有志向的年轻人通过努力学习获得体面的工作和生活</span>
			</div>
			<div class="body">
				<div class="left">
					<div>
						<img src="./img/login/head-logo.svg">
						<div>
							<img src="img/login/学习.png">
							<div>
								<p>学</p>
								<span>名师前沿精品课程</span>
							</div>
						</div>
						<div>
							<img src="img/login/练习.png">
							<div>
								<p>练</p>
								<span>章节练习+阶段测试</span>
							</div>
						</div>
						<div>
							<img src="img/login/修改.png">
							<div>
								<p>改</p>
								<span>逐行代码修改</span>
							</div>
						</div>
						<div>
							<img src="img/login/管理.png">
							<div>
								<p>管</p>
								<span>1V1老师督学</span>
							</div>
						</div>
						<div>
							<img src="img/login/测试.png">
							<div>
								<p>测</p>
								<span>1V1考核测验</span>
							</div>
						</div>
					</div>
				</div>


				<div class="right">
					<div class="top">
						<div class="l">学生注册</div>
						<div class="r">讲师注册</div>
					</div>
					<div class="bottom">
						<div class="item" id="tow1">
							<span>学生注册</span>
							<div>
								<div id="search1">
									<img src="img/login/用户.png">
									<input type="text" placeholder="请输入登录用户名" id="input1">
								</div>											
								<label id="label1">用户名长度为3-12位</label>
							</div>
							<div>
								<div id="search2" >
									<img src="img/login/密码.png">
									<input type="password" placeholder="请设置登录密码" id="pwd">
								</div>
								<div class="miMatishi">
									<div class="mi_1">
										<img src="img/login/对勾.png" alt="">
										<img src="img/login/错误.png" alt="">
										<span>长度为8-14个字符</span>
									</div>
									<div class="mi_2">
										<img src="img/login/对勾.png" alt="">
										<img src="img/login/错误.png" alt="">
										<span>由数字、字母以及下划线组成</span>
									</div>
									<div class="mi_3">
										<img src="img/login/对勾.png" alt="">
										<img src="img/login/错误.png" alt="">
										<span>禁止输入含有~的字符</span>
									</div>
								</div>
							</div>
							<div>
								<div id='search3'>
									<img src="img/login/手机号.png">
									<input type="text" placeholder="请输入手机号" id='input3'>	
								</div>
								<label id="label2">请输入合法手机号</label>
							</div>
							<div>
								<div id="search4">
									<img src="img/login/邮箱.png">
									<input type="text" placeholder="请输入邮箱" id="input4">
								</div>															
								<label id="label3">请输入合法邮箱</label>
							</div>
							<div>
								<a href="#"><button>注册</button></a>
							</div>
								<a href="login.html">返回登录…</a>
						</div>
						<div class="item" id="two2">
							<span>讲师注册</span>
							<div>
								<div id="search1_j">
									<img src="img/login/用户.png">
									<input type="text" placeholder="请输入登录用户名" id="input1_j">
								</div>											
								<label id="label1_j">用户名长度为3-12位</label>
							</div>
							<div>
								<div id="search2_j" >
									<img src="img/login/密码.png">
									<input type="password" placeholder="请设置登录密码" id="pwd_j">
								</div>
								<div class="miMatishi_j">
									<div class="mi_1_j">
										<img src="img/login/对勾.png" alt="">
										<img src="img/login/错误.png" alt="">
										<span>长度为8-14个字符</span>
									</div>
									<div class="mi_2_j">
										<img src="img/login/对勾.png" alt="">
										<img src="img/login/错误.png" alt="">
										<span>由数字、字母以及下划线组成</span>
									</div>
									<div class="mi_3_j">
										<img src="img/login/对勾.png" alt="">
										<img src="img/login/错误.png" alt="">
										<span>禁止输入含有~的字符</span>
									</div>
								</div>
							</div>
							<div>
								<div id='search3_j'>
									<img src="img/login/手机号.png">
									<input type="text" placeholder="请输入手机号" id='input3_j'>	
								</div>
								<label id="label2_j">请输入合法手机号</label>
							</div>
							<div>
								<div id="search4_j">
									<img src="img/login/邮箱.png">
									<input type="text" placeholder="请输入邮箱" id="input4_j">
								</div>															
								<label id="label3_j">请输入合法邮箱</label>
							</div>
							<div>
								<a href="#"><button type="button">注册</button></a>
							</div>
								<a href="login.html">返回登录…</a>
						</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<script src="./js/jquery-3.6.0.min.js"></script>
		<!-- 注册栏切换 -->
		<script type="text/javascript">
			var list = document.querySelector('.top');
			var div = list.querySelectorAll('div');
			var items = document.querySelectorAll('.item');
			// 循环绑定事件
			for (var i = 0; i < div.length; i++) {
				div[i].setAttribute('index', i);
				div[i].onclick = function() {
					var index = this.getAttribute('index');
					for (var i = 0; i < items.length; i++) {
						items[i].style.display = 'none';
					}
					items[index].style.display = 'block';
				}
			}
		</script>
		<script type="text/javascript" src="./js/register.js"></script>	
	</body>
</html>
